webpack.config.js
var path = require('path');
module.exports = {
entry: {
index:'./js/components/index'
},
externals: [{
'react-dom':'ReactDOM',
'react':'React'
}],
output: {
path:path.resolve(__dirname,'js/components'),
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
include: path.resolve(__dirname, 'js/components'),
loader: 'babel',
query: {
presets: ['es2015','react']
}
},
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias:[
{'react-dom':'./libs/react-dom.js','react':'./libs/react.js'}
]
}
};1.html
<!DOCTYPE html>
<html>
...
<body>
<script type="text/javascript" src='/libs/react.js'></script>
<script type="text/javascript" src='/libs/react-dom.js'></script>
<script type="text/javascript" src='/js/components/bundle.js'></script>
</body>
</html>不修改配置文件(推荐)
Iframe mode
运行
webpack-dev-server浏览器打开
http://localhost:8080/webpack-dev-server/1.html
Inline mode
在1.html中添加
<script src="http://localhost:8080/webpack-dev-server.js"></script>运行
webpack-dev-server浏览器打开
http://localhost:8080/1.html
修改配置文件
webpack.config.js
...
module.exports = {
entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080','./js/components/index'],
...
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};运行
webpack-dev-server,不用添加官网上说的--inline --hot参数浏览器打开
http://localhost:8080/1.html
这种方式的缺点:
会生成多余的js,json文件，并且只能手动删除
配置文件中的
entry只能为数组，不能用于多个入口的情况
...
entry: {
a: "./a",
b: "./b",
c: ["./c", "./d"]
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].entry.js"
}
...上面所有方式都需要先运行webpack -w监听文件变化
参考
官网文档
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。